<script setup lang="ts">
import F_list, {type filterGroupType} from "@/components/admin/f_list.vue";
import type {columnType} from "@/components/admin/f_list.vue";
import type {formListType} from "@/types";
import type { aiRoleOrderType} from "@/api/ai_role_order_api";
import {aiRoleOrderListApi} from "@/api/ai_role_order_api";
import {aiRoleOrderStatusOptions, aiRoleOrderTypeOptions} from "@/options";
import F_avatar_title from "@/components/common/f_avatar_title.vue";


const columns: columnType[] = [
  {title: "ID", dataIndex: 'id'},
  {title: "申请用户", slotName: 'user'},
  {title: "关联角色", slotName: 'role'},
  {title: "类型", dataIndex: 'type', type: "options", options: aiRoleOrderTypeOptions},
  {title: "工单状态", dataIndex: 'status', type: "options", options: aiRoleOrderStatusOptions},
  {title: "申请理由", dataIndex: 'reason'},
  {title: "申请时间", dataIndex: 'createdAt', type: "date"},
]
</script>

<template>
  <div>
    <f_list
        ref="fListRef"
        :url="aiRoleOrderListApi"
        no-add
        no-delete
        edit-label="工单审批"
        no-batch-delete
        no-check
        no-edit
        :columns="columns">
      <template #user="{record}: {record: aiRoleOrderType}">
        <f_avatar_title :title="record.userTitle " :avatar="record.userAvatar" :size="30"></f_avatar_title>
      </template>
      <template #role="{record}: {record: aiRoleOrderType}">
        <f_avatar_title :title="record.aiRoleTitle " :avatar="record.aiRoleAvatar" :size="30"></f_avatar_title>
      </template>
    </f_list>
  </div>
</template>

<style lang="less">
.ai_role_avatar {
  width: 100%;

  .ai_role_avatar_list {
    border: 1px solid var(--color-neutral-3);
    border-radius: 5px;
    padding: 10px;
    max-height: 200px;
    overflow-y: auto;

    .arco-radio-group {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-row-gap: 10px;
    }
  }

  .arco-upload {
    width: 100%;
  }

  .upload_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
    width: 100%;
    height: 40px;
    border-radius: 5px;
    border: 1px solid var(--color-neutral-3);
    margin-right: 10px;

    svg {
      color: var(--color-text-2);
    }
  }
}

</style>